<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .h1{

            width: 1000px;
            height: 200px;
            background-color: chartreuse;
        }
        /* 一个盒嵌入三个小盒，小盒为一个整体 */
        .h11{
            width: 99%;
            border: 1px solid red;
        }

        #h11{

            width: 99%;
            height: 20%;
            background-color: aquamarine;

        }
        #h12{

        width: 99%;
        height: 50%;
        background-color: blue;

        }
        #h13{

        width: 99%;
        height: 30%;
        background-color: blueviolet;

}





     .h2{

            width: 1000px;
            height: 400px;
            background-color: chartreuse;
        }

        /* 一个盒子里面放3个小盒子，小盒子为一个整体 分割三份*/ 
        .h21{

            width: 32.5%;
            height: 99%;
            display: inline-block;
            border: 1px solid blue;

        }
        /* 第一列 */
        .h211{

            width: 99%;
            height: 20%;
            border: 1px solid red;

        }
        .h211:nth-child(1){

            height: 25%;
            background-color: aquamarine;

        }
        .h211:nth-child(3){

            height: 30%;
            background-color: aquamarine;

        }
        #h214{
            height: 24%;
            background-color: rebeccapurple;

        }
        
       

        /* 第二列 */
        .h221{

            width: 99%;
            height: 40%;
            border: 1px solid red;
            background-color: blueviolet;

        }
        .h222{

            width: 99%;
            height: 59%;
            border: 1px solid red;
            background-color: burlywood;
        }


           /* 第三列 */
           .h231{

            width: 99%;
            height: 29%;
            border: 1px solid red;
            background-color: burlywood;

            }
         .h232{

            width: 99%;
            height: 69%;
            border: 1px solid red;
            background-color: blueviolet;
            }

           
            /*第三行  */
        .h3{
            width: 1000px;
            height: 200px;
            background-color: blue;
        }
        .h31{

            width: 99%;
            height: 60%;
            display: inline-block;
            border: 1px solid red;
            background-color: azure;
        }


    </style>
</head>
<body>
   <div class="h1">
        <div class="h11" id="h11"></div>
        <div class="h11" id="h12"></div>
        <div class="h11" id="h13"></div>
   </div>

   <!-- 3列，每列进行分行 -->
    <!-- 问题1，怎么他是往下进行分割的呢，怎么让他分割左右呢 -->
     <!-- 解决就是先创建一个总体的一个盒子，里面放3个小盒子，再分割3盒子 -->
   <div class="h2">
    <!-- 第一列  -->
    <div class="h21">
        <div class="h211" ></div>
        <div class="h211" ></div>
        <div class="h211" ></div>
        <div class="h211" id="h214"></div> 
    </div>
     <!-- 第二列  -->
    <div class="h21">
        <div class="h221"></div>
        <div class="h222"></div>
    </div>
    <div class="h21">
        <div class="h231"></div>
        <div class="h232"></div>
    </div>
   </div>

   <!-- 第三行 -->
   <div class="h3">
      <div class="h31"></div>
      <div class="h32"></div>
   </div>
</body>
</html>